<!-- 用户版本更新 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable" :exportBtn="false">
            <el-form-item label="用户名称">
                <el-input v-model="formInline.user_name" placeholder="请输入用户名称"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formInline.tel" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="版本号">
                <el-input v-model="formInline.version" placeholder="请输入版本号"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="formInline.is_push" @change="isPushChange">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="未指定" :value="1"></el-option>
                    <el-option label="指定" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="OS">
                <el-select v-model="formInline.os" @change="osChange">
                    <el-option label="全部" :value="''"></el-option>
                    <el-option label="安卓" :value="'android'"></el-option>
                    <el-option label="苹果" :value="'ios'"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期">
                <el-date-picker v-model="dataPicker" type="date" :default-value="new Date()" placeholder="选择日期"
                    value-format="yyyy-MM-dd" @change="pickerChange">
                </el-date-picker>
            </el-form-item>


            <template #btnBoxHeader>
                <el-button type="primary" @click="revoke">全量发布</el-button>
            </template>
        </CustomForm>
        <el-button type="primary" @click="pushBtnHandle" :disabled="!multipleSelection.length"
            style="margin-bottom: 5px;">灰度测试</el-button>

        <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '60%' }"></CustomDescriptions>


        <el-table :data="list" border style="width: 100%" height="580" ref="multipleTable"
            :cell-class-name="cellClassName" @selection-change="handleSelectionChange" v-loading="tableLoading">
            <!-- @selection-change="handleSelectionChange"  @select-all="selectTableAll" @select="selectTable"-->
            <el-table-column type="selection" :selectable="isRowSelectable" width="55">
            </el-table-column>
            <el-table-column prop="user_id" label="用户ID" width="80">
            </el-table-column>
            <el-table-column prop="user_name" label="姓名" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="level" label="角色" width="80">
                <template slot-scope="scope">
                    <span v-if="scope.row.level == 1">司机</span>
                    <span v-else-if="scope.row.level == 2">货主</span>
                    <span v-else-if="scope.row.level == 3">加油站</span>
                    <span v-else-if="scope.row.level == 7">车队长</span>
                </template>
            </el-table-column>
            <el-table-column prop="tel" label="手机号">
            </el-table-column>
            <el-table-column prop="version" label="版本" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="os" label="系统">
                <template slot-scope="scope">
                    <span v-if="scope.row.os == 'android'">安卓</span>
                    <span v-else-if="scope.row.os == 'ios'">苹果</span>
                    <span v-else-if="scope.row.os == 'web'">网页</span>
                </template>
            </el-table-column>
            <el-table-column prop="sysVersion" label="系统版本">
            </el-table-column>
            <el-table-column prop="deviceModel" label="型号" :show-overflow-tooltip="true">
            </el-table-column>

            <el-table-column prop="is_push" label="推送状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_push == 0" style="color:blue">未指定</span>
                    <span v-else-if="scope.row.is_push == 1" style="color:green">已指定</span>
                </template>
            </el-table-column>
            <el-table-column prop="add_time" label="登录时间" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.is_push == 0" size="mini" type="primary"
                        @click="handlePush(scope.row.id)">灰度测试</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="$pageSizeList" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getUserVersionList, specifyPush, revoke } from '@/api/set';
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            dataPicker: [],
            formInline: {
                user_name: "",
                tel: "",
                is_push: 0,
                version: "",
                os: "",
                time: "",
                page: 1,
                pageSize: 10
            },
            list: [],
            total: 0,

            descriptionsData: [
                {
                    label: "当前Android版本",
                    count: 0,
                    unit: ""
                },
                {
                    label: "当前IOS版本",
                    count: 0,
                    unit: ""
                }
            ],

            multipleSelection: [],
            tableLoading: false,
            android: "",
            ios: "",
            labelStyle: { "text-align": "center", "font-weight": "bold" },
            contentStyle: {
                color: "#444",
                "font-weight": "bold",
                "min-width": "200px"
            },
            dataPicker: '',
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        onSubmit() {
            this.formInline.page = 1;
            this.getUserVersionList();
        },
        resetTable() {
            this.formInline = {
                user_name: "",
                tel: "",
                is_push: 0,
                version: "",
                os: "",
                time: "",
                page: 1,
                pageSize: 10
            };
            this.dataPicker = '';
            this.getUserVersionList();
        },
        async specifyPush(data) {
            let res = await specifyPush(data);
            if (res.code == 200) {
                this.$message.success(res.msg)
            }
        },
        async getUserVersionList() {
            this.tableLoading = true;
            let res = await getUserVersionList(this.formInline);
            this.tableLoading = false;
            if (res.code == 200) {
                this.list = res.data ? res.data.data : [];
                this.total = res.data ? res.data.total : 0;
                this.descriptionsData[0].count = res.data ? res.data.android : '';
                this.descriptionsData[1].count = res.data ? res.data.ios : '';
            }
        },
        async pushBtnHandle() {
            if (this.multipleSelection) {
                console.log(this.multipleSelection);
                let idStr = this.multipleSelection.reduce((prev, curr) => {
                    return prev + curr.id + ","
                }, "");
                await this.specifyPush({
                    id: idStr,
                    status: 1
                });
                await this.getUserVersionList();
            }

        },
        pickerChange(val) {
            console.log(val);
            if (val) {
                this.formInline.time = val;
            } else {
                this.formInline.time = "";
            }
        },
        isPushChange(data) {
            this.formInline.is_push = data;
            this.page = 1;
            this.getUserVersionList();
        },
        osChange(data) {
            this.formInline.os = data;
            this.page = 1;
            this.getUserVersionList();
        },
        revoke() {
            this.$confirm(`确认全量发布?`, '系统提示', { confirmButtonText: '确认', cancelButtonText: '取消', closeOnClickModal: false, showCancelButton: true, showClose: false, type: 'warning' }).then(async () => {
                let res = await revoke();
                if (res.code == 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
                await this.getUserVersionList();
            }).catch(action => {
                console.log(action);
            })
        },
        cellClassName(data) {
            if (data.columnIndex === 4) {
                return 'big-size'
            }
        },
        handleSizeChange(data) {
            this.formInline.pageSize = data;
            this.getUserVersionList();
        },
        handleCurrentChange(data) {
            this.formInline.page = data;
            this.getUserVersionList();
        },
        handlePush(id) {
            this.$confirm(`确认推送?`, '系统提示', { confirmButtonText: '确认', cancelButtonText: '取消', closeOnClickModal: false, showCancelButton: true, showClose: false, type: 'warning' }).then(async () => {
                await this.specifyPush({
                    id,
                    status: 1
                });
                await this.getUserVersionList();
            }).catch(action => {

            })
        },
        isRowSelectable(row, index) {
            // 根据条件判断该行是否可以被选择
            // 例如: 禁止选择某个特定的用户
            if (row.is_push === 1) {
                return false;
            }
            return true;
        },
        handleSelectionChange(selection) {
            // 处理选中项变化
            this.multipleSelection = selection;
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getUserVersionList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-pagination {
    margin-top: 2px;
}
</style>